/* TODO: Create if statements referencing different SVGs for 9 tab group color options */
tab-group[style*="--tab-group-color: var(--tab-group-color-blue)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-blue.svg");
  --folder-icon-open: url("icons/folder/folder-open-blue.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-cyan)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-cyan.svg");
  --folder-icon-open: url("icons/folder/folder-open-cyan.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-gray)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-gray.svg");
  --folder-icon-open: url("icons/folder/folder-open-gray.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-green)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-green.svg");
  --folder-icon-open: url("icons/folder/folder-open-green.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-orange)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-orange.svg");
  --folder-icon-open: url("icons/folder/folder-open-orange.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-pink)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-pink.svg");
  --folder-icon-open: url("icons/folder/folder-open-pink.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-purple)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-purple.svg");
  --folder-icon-open: url("icons/folder/folder-open-purple.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-red)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-red.svg");
  --folder-icon-open: url("icons/folder/folder-open-red.svg");
}
tab-group[style*="--tab-group-color: var(--tab-group-color-yellow)"] {
  --folder-icon-closed: url("icons/folder/folder-closed-yellow.svg");
  --folder-icon-open: url("icons/folder/folder-open-yellow.svg");
}


:root {
  --transition-duration: 0.38s; /* Easily adjust timing here */
  --translate-distance: 75px; /* Control vertical translation amount */
  --uc-contextmenu-menuitem-padding-inline: 10px;
}

/* Strip default Firefox tab group stylings */

/* Remove outline from tab group labels */
.tab-group-label {
  tab-group[collapsed] > .tab-group-label-container & {
    outline: none !important;
  }
}

@media -moz-pref("sidebar.verticalTabs") {
  tab-group:not([collapsed]) {
    margin-block-end: 0 !important;
  }
}

/* Start adding ArcWTF folder stylings */

/* Tweaks for EXPANDED FF sidebar */
tab-group {
  & .tab-group-label-container {
    & label {
      /* Unify tab group label background and text color */
      background: transparent !important;
      color: var(--lwt-text-color) !important;
    }

    /* Add EXPANDED tab folder icon from Arc */
    /* TODO: Applied 9 different icons for each tab group color options */
    & label::before {
      content: var(--folder-icon-open) !important;
    }
  }

  /* Add colors to tab group label background when hovered */
  & .tab-group-label-container {
    & label:hover {
      background: color-mix(
        in srgb,
        light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 20%,
        transparent
      ) !important;
      color: light-dark(
        var(--tab-group-color),
        var(--tab-group-color-invert)
      ) !important;
      border-radius: 9px !important;
    }
  }
}

/* Add COLLAPSED tab folder icon from Arc */
tab-group[collapsed] {
  & .tab-group-label-container {
    /* TODO: Applied 9 different icons for each tab group color options */
    & label::before {
      content: var(--folder-icon-closed) !important;
    }
  }
}

/* EXPANDED FF Sidebar */
sidebar-main:has([expanded]) {
  tab-group {
    & .tab-group-label-container {
      & label {
        padding-left: 38px !important;
        padding-right: 10px !important;
        transition: 0.3s ease !important;
      }

      & label::before {
        position: absolute !important;
        margin-left: 4px !important;
        left: 0px !important;
        width: 23px !important;
        height: 23px !important;
      }
    }
  }
}

/* COLLAPSED FF sidebar */
sidebar-main:not([expanded]) {
  /* Adjust paddings, margins, add ease transitions */
  tab-group {
    padding-block: calc(var(--tab-inline-padding) / 2) !important;
    margin-block: 0 !important;
    transition: 0.3s ease !important;
  }

  /* Add colors to tab group label background when hovered */
  tab-group:hover {
    background: color-mix(
      in srgb,
      light-dark(var(--tab-group-color), var(--tab-group-color-invert)) 20%,
      transparent
    ) !important;
    color: light-dark(
      var(--tab-group-color),
      var(--tab-group-color-invert)
    ) !important;
  }
}

/*-------------------original og--------------------------------*/

/* ==== Tab groups ==== */
/* https://github.com/Anoms12/Advanced-Tab-Groups */
/* ====== V1.5.3 ====== */
/* Make groups workspace specific */

/* Cursed CSS Explanation */
/* Hides the tab group only if it does not have any visible tabs */
/* Previous naive implementation
*
* :has(tab[hidden])
*
* will make tab groups disappear if used */
/* across multiple workspaces due to how zen currently implements tab groups */

tab-group[style="--tab-group-color: var(--tab-group-colorr); --tab-group-color-invert: var(--tab-group-colorr); --tab-group-color-pale: var(--tab-group-colorr);"] {
  /*---------------------------asli imp margins------------------------*/

  border-radius: calc(var(--border-radius-medium) + 2px) !important;
  padding: 0px !important;

  margin: 4px 0px 4px 4px !important;

  & .tab-group-label-container {
    /*----------------uper niche ki spacing ke liye---------------------------------*/
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 0px !important;
    --tab-group-color-pale: transparent !important;
    --tab-group-color: transparent !important;
    margin: 0 !important;
    /*---------------folder ki height----------------------------------*/
    height: 35px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    border-radius: calc(var(--border-radius-medium) + 2px) !important;

    /*------------------------kaam ka h--------------------------*/
    &:hover {
      background-color: var(--tab-hover-background-color) !important;
    }

    &:after {
      display: none;
      padding: 0px !important;
      background-color: color-mix(
        in srgb,
        var(--tab-group-color) 50%,
        transparent
      ) !important;
    }
    /*-----------------------------------------kam ki modification -------------------------------------------*/
    & label {
      max-width: 100% !important;
      padding-top: 6px !important;
      margin-left: 18px !important;
      padding-bottom: 0px !important;
      margin-top: 0px !important;
      padding-inline: 0.9em !important;
      background: transparent !important;
      border: unset !important;
      font-weight: 501 !important;
      font-size: 16px !important;
      text-align: unset !important;
      color: var(--sidebar-text-color) !important;
      padding-left: 27px !important;
    }

    & label::before {
      content: "" !important;
      position: absolute !important;
      margin-left: 5px !important;

      left: 8.5px !important;
      scale: 1.13 !important;

      margin-top: 9px !important;
      top: 1% !important;
      width: 35px !important;
      height: 23px !important;

    }
  }
  /*-----------------------------------------------------------------end here ---------------------------------*/

  & tab:not([zen-glance-tab]) {
    width: calc(var(--zen-sidebar-width)-18px) !important;
    opacity: 1 !important;
    margin-left: 10px !important;

    overflow: visible !important;

    .tab-group-line {
      --tab-group-color-invert: transparent !important;
      --tab-group-color: transparent !important;
    }

    .tab-background:active {
      backdrop-filter: blur(10px) !important;
    }
  }

  @media not (-moz-bool-pref: "tab.groups.display-tab-range") {
    tab::before {
      background: none !important;
    }
  }

  &[collapsed] {
    /*-----------------------collapsed form hi heigh le liye--------------------------*/
    max-height: 42px !important;
    margin-top: 6px !important;
    margin-bottom: -2px !important;

    & tab {
      z-index: 999 !important;
      display: flex !important;

      filter: blur(38px) opacity(1) brightness(75%) !important;
      opacity: 0.1 !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    & .tab-group-label-container > label::before {
      content: "" !important;
      position: absolute !important;
      left: 10px !important;

      margin-top: 1px !important;
      top: 18% !important;
      width: 20px !important;
      height: 20px !important;
      scale: 1.13 !important;

      /*---------------------important--------------------------*/
      content: var(--folder-icon-closed) !important;
    }
  }

  #tabbrowser-tabs {
    & .tabbrowser-tab {
      &:active {
        transition: scale 0.03s !important;
        scale: 1;
      }
    }
  }

  /*-------------------original og--------------------------------*/

  #alltabs-button {
    display: block !important;
  }

  tab-group {
    display: flex !important;
    flex-direction: column !important;
    border-radius: calc(var(--border-radius-medium) + 2px) !important;
    margin: 0.8px 0px 0px 0px !important;

    transition: max-height var(--transition-duration)
        cubic-bezier(0.22, 0.61, 0.36, 1),
      margin var(--transition-duration) ease !important;
    overflow: hidden !important;
    max-height: 900px;
    will-change: max-height;

    & .tab-group-label-container {
      flex: 0 0 auto !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      --tab-group-color-pale: transparent !important;
      --tab-group-color: transparent !important;
      margin: 0 !important;
      height: 35px !important;
      border-radius: calc(var(--border-radius-medium) + 2px) !important;
      transition: background-color var(--transition-duration) ease !important;

      &:hover {
        background-color: var(--tab-hover-background-color) !important;
      }

      & label {
        max-width: 100% !important;
        padding: 6px 0.9em 0 27px !important;
        margin: -2px 0 0 17px !important;
        font-weight: 501 !important;
        font-size: 17px !important;
        color: var(--sidebar-text-color) !important;
        transition: color var(--transition-duration) ease !important;
      }

      & label::before {
        content: "" !important;
        position: absolute !important;
        left: 8.5px !important;
        margin: 5.3px 0 0 5px !important;
        width: 35px !important;
        height: 23px !important;

        transition: transform var(--transition-duration)
          cubic-bezier(0.22, 0.61, 0.36, 1) !important;
        content: var(--folder-icon-open) !important;
      }
    }

    & tab {
      width: calc(var(--zen-sidebar-width)-18px) !important;
      opacity: 1 !important;
      margin-left: 10px !important;
      transform: translateY(0);

      transition: transform var(--transition-duration)
        cubic-bezier(0.22, 0.61, 0.36, 1) opacity
        calc(var(--transition-duration) * 0.6) ease !important;
      will-change: transform, opacity;

      .tab-background:active {
        backdrop-filter: blur(0px) !important;
      }
    }

    &[collapsed] {
      max-height: 40px !important;
      margin: 0px !important;

      & tab {
        opacity: 0 !important;
        filter: blur(1px) !important;
        transform: translateY(calc(-5 * var(--translate-distance))) !important;
        transition: transform var(--transition-duration)
            cubic-bezier(0.22, 0.61, 0.36, 1),
          opacity calc(var(--transition-duration) * 0.4) ease !important;
      }

      & .tab-group-label-container > label::before {
        transform: translateY(0px);
      }
    }
  }

  /* ==== Tab groups ==== */
  /* https://github.com/Anoms12/Advanced-Tab-Groups */
  /* ====== V1.5.3 ====== */
  /* Make groups workspace specific */

  /* Cursed CSS Explanation */
  /* Hides the tab group only if it does not have any visible tabs */

  tab-group {
    /* Visual Hierarchy Improvements */
    display: flex !important;
    flex-direction: column !important;

    @media (-moz-bool-pref: "tab.groups.background") {
      background: color-mix(
        in srgb,
        var(--tab-group-color-invert) 12%,
        transparent
      ) !important;

      @media (-moz-bool-pref: "tab.groups.borders") {
        border-top: 1px solid #f2f2f21f !important;
        border-bottom: 1px solid #4442441f !important;
      }
    }
    /*---------------------------asli imp margins------------------------*/

    border-radius: calc(var(--border-radius-medium) + 2px) !important;
    padding: 0px !important;

    margin: 4px 0px 4px 0px !important;

    & .tab-group-label-container {
      /*----------------uper niche ki spacing ke liye---------------------------------*/
      flex: 0 0 auto !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      padding: 0px !important;
      --tab-group-color-pale: transparent !important;
      --tab-group-color: transparent !important;
      margin: 0 !important;
      /*---------------folder ki height----------------------------------*/
      height: 35px !important;
      margin-top: 0px !important;
      margin-bottom: 0px !important;
      border-radius: calc(var(--border-radius-medium) + 2px) !important;

      /*------------------------kaam ka h--------------------------*/
      &:hover {
        background-color: var(--tab-hover-background-color) !important;
      }

      &:after {
        display: none;
        padding: 0px !important;
        background-color: color-mix(
          in srgb,
          var(--tab-group-color) 50%,
          transparent
        ) !important;
      }
      /*-----------------------------------------kam ki modification -------------------------------------------*/
      & label {
        max-width: 100% !important;
        padding-top: 6px !important;
        margin-left: 18px !important;
        padding-bottom: 0px !important;
        margin-top: -2px !important;
        padding-inline: 0.9em !important;
        background: transparent !important;
        border: unset !important;
        font-weight: 501 !important;
        font-size: 16px !important;
        text-align: unset !important;
        color: var(--sidebar-text-color) !important;
        padding-left: 27px !important;

        @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
          color: transparent !important;
        }
      }

      & label::before {
        content: "" !important;
        position: absolute !important;
        margin-left: 5px !important;

        left: 8.5px !important;
        scale: 1.13 !important;

        margin-top: 5px !important;
        top: 1% !important;
        width: 35px !important;
        height: 23px !important;

        content: var(--folder-icon-open) !important;
      }
    }
    /*-----------------------------------------------------------------end here ---------------------------------*/

    & tab:not([zen-glance-tab]) {
      width: calc(var(--zen-sidebar-width)-18px) !important;
      opacity: 1 !important;
      margin-left: 10px !important;

      overflow: visible !important;

      .tab-group-line {
        --tab-group-color-invert: transparent !important;
        --tab-group-color: transparent !important;
      }

      .tab-background:active {
        backdrop-filter: blur(10px) !important;
      }
    }

    tab::before {
      content: "";
      position: absolute;
      top: 50%;
      width: 2px;
      height: 40px !important;
      background-color: light-dark(
        var(--tab-group-color),
        var(--tab-group-color-invert)
      );
      border-radius: 360px !important;
      z-index: 999 !important;
    }

    @media not (-moz-bool-pref: "tab.groups.display-tab-range") {
      tab::before {
        background: none !important;
      }
    }

    &[collapsed] {
      /*-----------------------collapsed form hi heigh le liye--------------------------*/
      max-height: 42px !important;
      margin-top: 6px !important;
      margin-bottom: -2px !important;

      & tab {
        z-index: 999 !important;
        display: flex !important;

        filter: blur(38px) opacity(1) brightness(75%) !important;
        opacity: 0.1 !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      & .tab-group-label-container > label::before {
        content: "" !important;
        position: absolute !important;
        left: 10px !important;

        margin-top: 1px !important;
        top: 18% !important;
        width: 20px !important;
        height: 20px !important;
        scale: 1.13 !important;

        /*---------------------important--------------------------*/
        content: var(--folder-icon-closed) !important;
      }
    }
  }
}
